import React, { useEffect, useState, useRef } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { message, Spin } from 'antd';
import { getCanvasList } from '../api/canvas';

/**
 * 画布访问权限守卫组件
 * 检查用户是否有权限访问特定的画布
 * 如果没有权限，则重定向到首页
 */
const CanvasGuard = ({ children }) => {
    const { id } = useParams();
    const navigate = useNavigate();
    const [loading, setLoading] = useState(true);
    const [hasAccess, setHasAccess] = useState(false);
    // 是否在鉴权
    const isAccessing = useRef(false);

    // 组件第一次渲染时，检查画布访问权限
    useEffect(() => {
        const checkAccess = async () => {
            // 如果已经在鉴权，则不重复鉴权
            if (isAccessing.current) return;
            try {
                // 标记正在鉴权
                isAccessing.current = true;
                setLoading(true);

                // 获取用户的画布列表
                const response = await getCanvasList();

                if (response && response.data) {
                    // 检查用户是否有权限访问该画布
                    const hasPermission = response.data.some((canvas) => canvas._id === id);

                    if (!hasPermission) {
                        message.error('您没有权限访问此画布');
                        navigate('/');
                        return;
                    }

                    setHasAccess(true);
                } else {
                    message.error('获取画布列表失败');
                    navigate('/');
                }
            } catch (error) {
                console.error('检查画布访问权限时出错:', error);
                message.error('检查画布访问权限时出错');
                navigate('/');
            } finally {
                // 鉴权完毕
                isAccessing.current = false;
                setLoading(false);
            }
        };

        if (id) {
            checkAccess();
        } else {
            setLoading(false);
        }
    }, [id, navigate]);

    if (loading) {
        return (
            <div
                style={{
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    height: '100vh'
                }}
            >
                <Spin size="large" tip="正在检查访问权限..." />
            </div>
        );
    }

    return hasAccess ? children : null;
};

export default CanvasGuard;
